<template>
  <div class="product">
    <!-- 表格弹窗 -->
    <Dialog ref="stuDialog" :visible.sync="visible" @ok="ok"></Dialog>
    <!-- 表格弹窗 -->
    <!-- <el-select
      v-model="value"
      filterable
      placeholder="请输入名字"
      style="width: 300px"
      @keydown.enter.native="search"
    > -->
    <!-- <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option> -->
    <!-- </el-select> -->

    <el-select
      v-model="value"
      multiple
      filterable
      remote
      reserve-keyword
      placeholder="请输入关键词"
      :loading="loading"
      @keydown.enter.native="searchStu"
    >
      <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-button
      icon="el-icon-search"
      type="primary"
      style="margin: 10px"
      plain
    ></el-button>

    <el-button
      type="primary"
      width="80px"
      style="margin-left: 20px"
      @click="addStu"
    >
      添加项目
    </el-button>
    <br />
    <br />

    <el-table v-loading="loading" :data="stuData" style="width: 100%" border>
      <el-table-column prop="avatar" label="头像" width="120" align="center">
        <template v-slot="{ row: { headimgurl } }">
          <el-avatar
            size="large"
            shape="square"
            :src="
              headimgurl
                ? headimgurl
                : 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png'
            "
          ></el-avatar>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="姓名" width="120"></el-table-column>
      <el-table-column prop="degree" label="学历"></el-table-column>
      <el-table-column prop="class" label="班级"></el-table-column>
      <el-table-column prop="productUrl" label="项目地址"></el-table-column>
      <el-table-column prop="cTime" label="创建时间"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ row }">
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-view"
            @click="stuFn(row)"
          >
            查看
          </el-button>
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            @click="edit(row)"
          >
            编辑
          </el-button>
          <el-button
            type="danger"
            size="mini"
            icon="el-icon-delete"
            @click="deleteStu(row)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      hide-on-single-page
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="pageChange"
    ></el-pagination>
  </div>
</template>

<script>
import * as api from "@/api/stu";
import Dialog from "@/components/Dialog";
import { mapMutations } from "vuex";

export default {
  meta: {
    name: "学员项目管理",
    title: "xyxmgl",
    icon: "iconfont icon-shangpinguanli",
  },
  data() {
    return {
      visible: false,
      stuData: [],
      loading: false,
      total: 0,
      pageSize: 0,
      options: [],
      value: [],
      list: [],
    };
  },
  components: {
    Dialog,
  },
  mounted() {
    this.getStuList();
  },
  methods: {
    getStuList(count = 8, page = 1, classes) {
      this.loading = true;
      api.getStuList(count, page, classes).then((res) => {
        if (res.data.state) {
          this.stuData = res.data.data;
          this.total = res.data.total;
          this.pageSize = count;
          this.loading = false;
          console.log("123", res);
        }
      });
    },
    pageChange(page) {
      console.log(page);
      this.getStuList(undefined, page);
    },
    searchStu(e) {
      let key = e.target.value;
      api
        .searchStu(key)
        .then((res) => {
          console.log(res);
          if (res.data.state) {
            this.stuData = res.data.data;
            this.total = 0;
            if (!res.data.total) return this.$message.warning("无相关搜索信息");
          } else {
            //  this.$message.error("服务器连接错误，请重试！")
            return res;
          }
        })
        .catch(() => this.$message.error("搜索请求发送失败"));
    },
    addStu() {
      this.visible = true;
      this.$refs.stuDialog.title = "增加学员信息";
    },
    ...mapMutations("stu", ["SET_STUPROFILL"]),
    stuFn(row) {
      this.SET_STUPROFILL(row);
      this.$router.push("/studentmanager/studentprofile");
    },
    edit(row) {
      this.$refs.stuDialog.stuForm = { ...row };
      this.$refs.stuDialog.title = "编辑学员信息";
      this.visible = true;
    },
    deleteStu(row) {
      this.$confirm("该操作将永久删除数据,是否继续?", "删除提示")
        .then(() => {
          api.deleteStu(row.sId).then((res) => {
            if (res.data.state) {
              this.$message.success("删除成功");
              this.getStuList();
            }
          });
        })
        .catch(() => {
          this.$message.warning("已取消删除");
        });
    },
    ok(stuFromData) {
      let dialogTitle = this.$refs.stuDialog.title;
      if (dialogTitle === "增加学员信息") {
        api.addStu(stuFromData).then((res) => {
          if (res.data.state) {
            this.getStuList();
            this.$message.success("添加成功");
          }
        });
      } else if (dialogTitle === "编辑学员信息") {
        api.editStu(stuFromData).then((res) => {
          if (res.data.state) {
            this.getStuList();
            this.$message.success("更新成功");
          }
        });
      }
      this.visible = false;
    },
  },
};
</script>
